<template>
  <div class="table">
    <table>
      <thead>
        <td>1:00</td>
        <td>2:00</td>
        <td>3:00</td>
        <td>4:00</td>
        <td>5:00</td>
        <td>6:00</td>
        <td>7:00</td>
        <td>8:00</td>
        <td>9:00</td>
        <td>10:00</td>
      </thead>
      <tbody>
        <td>预警</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tbody>
    </table>
  </div>
</template>

<style lang="scss">
  .table {
    padding: 0px 40px;
    table {
      width: 100%;
      thead {
        width: 100%;
        display: flex;
        font-size: 6px;
        td {
          width: 100px;
          padding: 10px 0px;
          border: 1px solid #FFF;
          text-align: center;
          box-sizing: border-box;
          background-color: #002c4d;
        }
      }
      tbody {
        width: 100%;
        display: flex;
        td {
          width: 100px;
          padding: 10px 0px;
          border: 1px solid #FFF;
          text-align: center;
          box-sizing: border-box;
          background-color: #266ba2;
        }
      }
    }
  }
</style>